<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container div{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 50px;
            height: 50px;
            background-color: blue;
            color: #fff;
            opacity: 0.5px;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }
        #oBox{
            position: absolute;
            left: 500px;
            top: 500px;
            width: 50px;
            height: 50px;
            background-color: red;
            color: #fff;
            opacity: 0.5px;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div id="oBox"></div>
    <script>
        var container=document.getElementById("container"),
            oDiv=container.getElementsByTagName("div"),
            width=oDiv[0].offsetWidth,
            oBox=document.getElementById("oBox");
            for(var i=oDiv.length-1;i>=0;i--){
                oDiv[i].style.left=(oDiv.length-1-i)*width+"px";
            }
            document.onkeydown=function(e){
                if(col(oDiv[0],oBox)){
                    container.appendChild(oBox);
                }else{
                    oBox.style.background="red";
                }
                for(var i=oDiv.length-1;i>0;i--){
                    oDiv[i].style.left=oDiv[i-1].offsetLeft+"px";
                    oDiv[i].style.top=oDiv[i-1].offsetTop+"px";
                }
                var e=window.event || e;
                switch(e.keyCode){
                    case 37:
                        oDiv[0].style.left=oDiv[0].offsetLeft-width+"px";
                        break;
                    case 38:
                        oDiv[0].style.top=oDiv[0].offsetTop-width+"px";
                        break;
                    case 39:
                        oDiv[0].style.left=oDiv[0].offsetLeft+width+"px";
                        break;
                    case 40:
                        oDiv[0].style.top=oDiv[0].offsetTop+width+"px";
                        break;
                }
            }
            function col(el1,el2){
                var r1=el1.offsetLeft+el1.offsetWidth,
                    b1=el1.offsetTop+el1.offsetHeight,
                    l1=el1.offsetLeft,
                    t1=el1.offsetTop;
                var l2=el2.offsetLeft,
                    t2=el2.offsetTop,
                    r2=el2.offsetLeft+el2.offsetWidth,
                    b2=el2.offsetTop+el2.offsetHeight;
                if(r1<l2 || b1<t2 || l1>r2 || t1>b2){
                    return false;
                }else{
                    return true;
                }
            }
    </script>
</body>
</html>